import Vue from 'vue'
import VueRouter from 'vue-router'
console.log(VueRouter.install)
Vue.use(VueRouter)
let obj = {
  '../components/B.vue': function () { return import('../components/B.vue') },
  '../components/A.vue': function () { return import('../components/A.vue') },
}
let routes = [
  // 路由映射表
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      // 路由元信息 这里可以用来存储一些当路径需要某些固定参数 像页面标题  权限之类的
      til: "首页",
      role: ['admin', 'user', 'super']
    },
    component: () => import('../views/home.vue'),
    children: [
      {
        path: '/home/a',
        name: 'home_a',
        component: obj['../components/A.vue'],
        meta: {
          // 路由元信息 这里可以用来存储一些当路径需要某些固定参数 像页面标题  权限之类的
          til: "A页",
          role: ['super']
        },
      }
    ]
  },
  {
    path: '/user',
    name: 'user123',
    meta: {
      // 路由元信息 这里可以用来存储一些当路径需要某些固定参数 像页面标题  权限之类的
      til: "用户页",
      role: ['user']
    },
    component: () => import('../views/user.vue')
  },
  {
    path: '/list/:pn',
    name: 'list123',
    component: () => import('../views/list.vue')
  },
  // {
  //   path: '/*', // 页面的路径跟上边的路由 没有一个匹配上的时候 就会走到这里
  //   redirect: '/home'
  // }
]
let router = new VueRouter({
  routes,
  mode: 'history',
  // linkActiveClass: 'qqq',
  // linkExactActiveClass: 'www'
})

let userRole = 'user'

// router.beforeEach((to, from, next) => {
//   // to 和 from的格式 等同  $route
//   console.log(to, from)
//   document.title = to.meta.til || "珠峰"
//   // if (to.path == '/user') {
//   //   next()
//   // } else {
//   //   next('/user') // next 参数 等同于 push的参数 //使用next进行路径跳转的时候 也会触发前置守卫
//   // }
//   if (!to.meta.role || to.meta.role.includes(userRole)) {
//     //证明有权限  
//     next()
//   } else {
//     next('/404')
//   }
// })

setTimeout(() => {
  // 使用addRoute的时候 要注意  404配置的位置
  let ary = [{
    path: '/home/qqq',
    componentUrl: '../components/B.vue'
  },
  {
    path: '/ttt',
    componentUrl: '../components/B.vue'
  }]

  ary.forEach(item => {
    router.addRoute('home', {
      path: item.path,
      component: obj[item.componentUrl]
      // component: () => import(item.componentUrl)
    })
  })
  router.addRoute({
    path: '/*', // 页面的路径跟上边的路由 没有一个匹配上的时候 就会走到这里
    redirect: '/home'
  })

}, 2000);


export default router
/* 
  hash模式利用的是 hashchange事件
  history模式 利用的是  popstate事件  +  pushState方法和replaceState方法
    前端使用history模式是需要后端配合的，当用户刷选 要返回404的时候 后端不要返回404而是返回我们的html即可

  $route 和 $router的区别？？？？
    $route   是我们用来获取参数的一个都西昂
    $router  是router实例 一边用来调用方法 push replace go back addRoute...  
*/